<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 9/21
  Time: 10:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>Title</title>

    <%--通过include指令导入外部文件。导入通用的header文件--%>
    <%@include file="common/headers.jsp"%>

    <!--日历插件-->
    <link rel="stylesheet" href="static/boostrapDatetimepicker/css/bootstrap-datetimepicker.css">
    <script src="static/boostrapDatetimepicker/js/bootstrap-datetimepicker.js"></script>
    <!--datetimepicker汉化-->
    <script type="text/javascript" src="static/boostrapDatetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"
            charset="UTF-8"></script>
</head>
<body>
<div class="container">
    <form action="" class="form-horizontal" role="form">
        <fieldset>
            <legend>Test</legend>
            <div class="form-group">
                <label for="dtp_input1" class="col-md-2 control-label">DateTime Picking</label>
                <div class="input-group date form_datetime col-md-5" data-date="1979-09-16T05:25:07Z"
                     data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
                    <input class="form-control" size="16" type="text" value="" readonly>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                </div>
                <input type="hidden" id="dtp_input1" value=""/><br/>
            </div>
            <div class="form-group">
                <label for="dtp_input2" class="col-md-2 control-label">Date Picking</label>
                <div class="input-group date form_date col-md-5" data-date="" data-date-format="dd MM yyyy"
                     data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
                    <input class="form-control" size="16" type="text" value="" readonly>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                </div>
                <input type="hidden" id="dtp_input2" value=""/><br/>
            </div>
            <div class="form-group">
                <label for="dtp_input3" class="col-md-2 control-label">Time Picking</label>
                <div class="input-group date form_time col-md-5" data-date="" data-date-format="hh:ii"
                     data-link-field="dtp_input3" data-link-format="hh:ii">
                    <input class="form-control" size="16" type="text" value="" readonly>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
                </div>
                <input type="hidden" id="dtp_input3" value=""/><br/>
            </div>

            <div class="form-group">
                <label for="dtp_input3" class="col-md-2 control-label">自定义</label>
                <div class="input-group date form_customer col-md-5" data-date="" data-date-format="hh:ii"
                     data-link-field="dtp_input3" data-link-format="hh:ii">
                    <input class="form-control" size="16" type="text" value="" readonly>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
                </div>
                <input type="hidden" id="dtp_input4" value=""/><br/>
            </div>
        </fieldset>
    </form>
</div>
</body>
<script type="text/javascript">
    $('.form_datetime').datetimepicker({
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0,
        showMeridian: 1
    });
    $('.form_date').datetimepicker({
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        minView: 2,
        forceParse: 0
    });
    $('.form_time').datetimepicker({
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 1,
        minView: 0,
        maxView: 1,
        forceParse: 0
    });

    $('.form_customer').datetimepicker({
        language: 'zh-CN',
        format:'yyyy-mm-dd',
        autoclose: 1, //选择完成后自动关闭面板
        weekStart: 1,
        todayBtn: 0, //1：显示今天按钮，0：不显示今天按钮

        todayHighlight: 1, //默认当前日期高亮显示
        startView: 2,   //打开面板时的显示视图
        /*
        * 0：选择精确到分
        * 1：选择精确到小时
        * 2：选择精确到天
        * 3：选择精确到月
        * 4：选择精确到年
        * */
        minView: 2,
        //maxView: 4,  //最大精确到什么视图
    });
</script>
</html>
